<div class="container-fluid" style="height: 100%; overflow:hidden;">

    <div class="clr-row flex-items-xs-between send-row">

        <div class="clr-col-6 text-center animate" style="align-self: center;">
            <div class="content-area" style="padding-top: 0; overflow-x: hidden;">
                <div class="balance free-title">
                    <div *ngIf="sendForm.value.token === aService.activeChain['symbol']" class="infos">
                        <fa-icon [icon]="['far', 'lock-open']"></fa-icon>&nbsp;FREE
                        <ng-container *ngIf="aService.activeChain.name === 'EOS MAINNET'">
                            ${{unstaked * aService.usd_rate | number : '1.2-2'}}
                        </ng-container>
                    </div>
                    <ng-container
                            *ngIf="sendForm.value.token !== aService.activeChain['symbol'] && 'selectedToken'['price'] !== null">
                        ${{token_balance * selectedToken['price'] | number : precision}}
                    </ng-container>
                </div>
                <ng-container *ngIf="sendForm.value.token === aService.activeChain['symbol']">
                    <div class="eos highlight-primary">{{unstaked | number :'1.0-' + this.aService.activeChain['precision']}} {{aService.activeChain['symbol']}}</div>
                    <div *ngIf="unstaking > 0" class="highlight">
                        <fa-icon [icon]="['far', 'lock']"></fa-icon>&nbsp;Will be {{(unstaked + unstaking) | number :
                        '1.2-4'}} {{aService.activeChain['symbol']}} {{unstakeTime}}
                    </div>
                </ng-container>
                <ng-container *ngIf="sendForm.value.token !== aService.activeChain['symbol']">
                    <div class="eos highlight-primary">{{token_balance | number :  precision}} {{selectedToken.name}}</div>
                </ng-container>
                <form [formGroup]="sendForm">
                    <div>
                        <mat-form-field class="example-full-width">
                            <input type="text" placeholder="Token" matInput formControlName="token"
                                   [matAutocomplete]="auto1" (blur)="formatTokenSymbol()">
                            <fa-icon matSuffix [icon]="['fas', 'caret-down']"></fa-icon>
                            <mat-autocomplete #auto1="matAutocomplete">

                                <mat-option value="{{aService.activeChain['symbol']}}">
                                    {{ aService.activeChain['symbol'] }}
                                </mat-option>

                                <mat-option *ngFor="let token of filteredTokens | async" [value]="token.name">
                                    {{ token.name }}
                                </mat-option>

                            </mat-autocomplete>
                        </mat-form-field>
                        <mat-form-field class="field-width" style="margin-top: 12px; margin-bottom: 12px">
                            <input #toAccount matInput type="text" formControlName="to"
                                   placeholder="Send to (account name)" maxlength="12" class="text-lowercase"
                                   [matAutocomplete]="auto" (blur)="checkContact(toAccount.value); checkAccountName();">
                            <mat-error align="start" *ngIf="errormsg !== ''">
                                {{errormsg}}
                            </mat-error>
                            <mat-hint align="end">{{toAccount.value.length}} / 12</mat-hint>
                            <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let contact of filteredContacts | async; let last = last"
                                            [value]="contact.account" [class.last]="last">
                                    <div class="name highlight">{{ contact.name }}</div>
                                    <div class="account">{{ contact.account }}</div>
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                        <mat-form-field class="field-width">
                            <input matInput formControlName="amount" [textMask]="{mask: numberMask}" type="text"
                                   placeholder="Amount ({{selectedToken['name']}})" (blur)="checkAmount();">
                            <button type="button" mat-button matSuffix mat-icon-button class="btn btn-info-outline btn-sm btn-max"
                                    (click)="setMax()">
                                MAX
                            </button>
                            <mat-error align="start" *ngIf="amounterror !== ''">
                                {{amounterror}}
                            </mat-error>
                        </mat-form-field>
                        <mat-form-field class="field-width" style="margin-bottom: 12px;">
                            <input matInput #message maxlength="256" formControlName="memo" type="text"
                                   placeholder="Memo ({{memoMsg}})">
                            <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
                        </mat-form-field>
                    </div>
                    <ng-container
                            *ngIf="errormsg === '' && sendForm.value.to !== '' && !contactExist">
                        <div class="main-text mt-3 mb-1">This account is not yet in your contacts</div>
                        <clr-toggle-wrapper class="text-left  mt-2 mb-3">
                            <input clrToggle type="checkbox" id="addtoContacts" formControlName="add">
                            <label for="addtoContacts" class="main-text">Add to contacts?</label>
                        </clr-toggle-wrapper>
                        <mat-form-field class="alias" *ngIf="add">
                            <input matInput formControlName="alias" type="text" placeholder="Contact name">
                        </mat-form-field>
                    </ng-container>
                    <button type="submit" class="btn btn-block btn-info-outline" (click)="newTransfer()"
                            [disabled]="!sendForm.valid">
                        <fa-icon [icon]="['far', 'paper-plane']"></fa-icon>&nbsp;&nbsp;SEND
                    </button>
                </form>
            </div>
        </div>
        <div class="clr-col-6 contacts-panel flex-nowrap" style="height: 100%;">
            <div class="clr-row flex-items-xs-between contacts-pad contacts-panel-header">
                <div class="clr-col-6">
                    <h1 class="token-title-color mt-0">My Contacts</h1>
                </div>
                <div class="clr-col-6 token-title-color">
                    <form [formGroup]="searchForm" class="searchform">
                        <mat-form-field class="example-full-width">
                            <input type="text" matInput placeholder="Search..." formControlName="search">
                            <fa-icon matSuffix [icon]="['far', 'search']" size="lg"></fa-icon>
                        </mat-form-field>
                    </form>
                </div>
            </div>
            <div class="contacts-panel-body">
                <div class="contacts-pad token-title-color" style="font-size: 17px;" *ngIf="contacts.length === 0">
                    You don't have any contacts yet :(
                </div>
                <ng-container *ngFor="let contact of searchedContacts | async; let last = last">
                    <div class="clr-row letter-divider" *ngIf="contact.type === 'letter'">
                        <div class="clr-col-12"><h5 class="mt-0 letter">{{contact.name}}</h5></div>
                    </div>
                    <ul *ngIf="contact.type === 'contact'" (click)="selectContact(contact)">
                        <li class="contacts-pad" [class.last-item]="last">
                            <div class="clr-row justify-content-between">
                                <div class="clr-col-lg-8 clr-col-sm-6 clr-col-md-7">
                                    <h5 class="token-title-color mt-0">{{contact.name}}</h5>
                                    <div class="account-color">{{contact.account}}</div>
                                </div>
                                <div class="clr-col-lg-4 clr-col-sm-6 clr-col-md-5" style="text-align: right">
<!--                                    <button class="btn btn-info-outline editBtn"-->
<!--                                            (click)="openEditContactModal(contact)">-->
<!--                                        <fa-icon [icon]="['far', 'pencil']"></fa-icon>-->
<!--                                    </button>-->
                                    <button class="btn btn-accent-outline editBtn"
                                            (click)="openEditContactModal(contact)">
                                        <fa-icon [icon]="['far', 'pencil']"></fa-icon>
                                    </button>
                                    <button class="btn btn-danger-outline deleteBtn"
                                            (click)="openDeleteContactModal(contact)">
                                        <fa-icon [icon]="['far', 'times']"></fa-icon>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </ng-container>
            </div>
            <div class="contacts-panel-footer">
                <button class="btn btn-block newcontact-btn" (click)="newContactModal = true">
                    <fa-icon [icon]="['far', 'plus']"></fa-icon>&nbsp;&nbsp;NEW CONTACT
                </button>
            </div>
        </div>
    </div>
</div>

<clr-modal [(clrModalOpen)]="newContactModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        <fa-icon [icon]="['far', 'user-plus']"></fa-icon>&nbsp;&nbsp;New contact
    </h3>
    <div class="modal-body">
        <form [formGroup]="contactForm">
            <mat-form-field>
                <input matInput #addAccount type="text" formControlName="account"
                       placeholder="Account name"
                       class="text-lowercase" maxlength="12" (blur)="checkAccountModal()">
                <mat-error align="start" *ngIf="adderrormsg !== ''">
                    {{adderrormsg}}
                </mat-error>
                <mat-hint align="end">{{addAccount.value.length}} / 12</mat-hint>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="text" formControlName="name" placeholder="Contact name">
            </mat-form-field>
        </form>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="submit" class="btn btn-info-outline" (click)="addContact()" [disabled]="!contactForm.valid">
            Add
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="editContactModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        <fa-icon [icon]="['far', 'user-edit']"></fa-icon>&nbsp;&nbsp;Edit contact
    </h3>
    <div class="modal-body">
        <form [formGroup]="contactForm">
            <mat-form-field>
                <input matInput type="text" formControlName="account"
                       placeholder="Account name"
                       class="text-lowercase" maxlength="12" readonly>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="text" (keyup.enter)="doEditContact()" formControlName="name"
                       placeholder="Contact name">
            </mat-form-field>
        </form>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="submit" class="btn btn-info-outline" (click)="doEditContact()" [disabled]="!contactForm.valid">
            Edit
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="deleteContactModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        <fa-icon [icon]="['far', 'user-minus']"></fa-icon>&nbsp;&nbsp;<span class="highlight-primary">Delete</span> contact
    </h3>
    <div class="modal-body">
        <p style="margin-bottom: 20px;">Are you sure you want do delete the contact <span
                class="highlight-primary">{{selectedDeleteContact['name']}}</span>?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="deleteContactModal = false">Cancel</button>
        <button type="button" class="btn btn-info-outline" (click)="doDeleteContact()">
            Yes, delete
        </button>
    </div>
</clr-modal>
